<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>选项卡-小懒猫</title>
		<meta name="keywords" content="关键字,关键字"/>
		<meta name="description" content="描述信息">
		<link rel="stylesheet" href="css/common.css" />
		<style type="text/css">
			body{
				background: #e5e5e5;
			}
			.nav_wrap{
				padding: 100px;
			}
			#wrap_content{
				display: flex;
			}
			#wrap_content li:hover a{
				color: #fff;
			}
			
			#wrap_content li a{
				display: block;
				font-size: 14px;
				width: 100px;
				height: 40px;
				text-align: center;
				line-height: 40px;
			}
			.content_wrap{
				width: 400px;
				height: 200px;
				background: #fff;
			}
			.content_wrap div{
				display: none;
			}
			.content_wrap div.show{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="nav_wrap">
			<ul id="wrap_content">
				<li tab="home" class="u-b"><a href="javascript:void(0)">首页</a></li>
				<li tab="category" class="u-c"><a href="javascript:void(0)">分类</a></li>
				<li tab="theme" class="u-d"><a href="javascript:void(0)">主题</a></li>
				<li tab="msg" class="u-e"><a href="javascript:void(0)">留言</a></li>
			</ul>
			<div class="content_wrap">
				<div style="display: block;" id="home">首页</div>
				<div id="category">分类</div>
				<div id="theme">主题</div>
				<div id="msg">留言</div>
			</div>
		</div>
		<script type="text/javascript">
			
			function dom(id){
				return document.getElementById(id);
			}
			
			function log(msg){
				return console.log(msg);
			}
			
			window.onload = function(){
				var ulDom = dom("wrap_content");
				var children = ulDom.children;
				var len = children.length;
				for(var i=0;i<len;i++){
					var liDom = children[i];
					liDom.onclick = function(){
						var tab = this.getAttribute("tab");
						var tabDom = dom(tab);
						var pDom = tabDom.parentElement;
						var pDomChildern = pDom.children;
						var $this = this;
						for(var i=0;i<pDomChildern.length;i++){
							if($this!=pDomChildern[i]){
								pDomChildern[i].style.display = "none";
							}
							tabDom.style.display = "block";
						}
					}
				}
			}
			
		</script>
	</body>
</html>
